<%@ page language="java" pageEncoding="UTF-8" %>
<%@ page import="com.yoyo.itravel.constants.UserConstant" %>
<!DOCTYPE html>
<html>
<head>
    <%
        String phone_email = "";
        String password = "";
        String login_info_str = "";
        String checkedRemember = "";
        String checkedAuto = "";
        Cookie[] cookies = request.getCookies();
        for (int i = 0; cookies != null && i < cookies.length; i++) {
            if ((UserConstant.REMEMBER_LOGIN_INFO).equals(cookies[i].getName())) {
                login_info_str = cookies[i].getValue();
                // 存在，获得用户登录信息
                phone_email = login_info_str.split("&")[0];
                password = login_info_str.split("&")[1];
                checkedRemember = login_info_str.split("&")[2];
            }
            if ((UserConstant.AUTO_LOGIN_INFO).equals(cookies[i].getName())) {
                login_info_str = cookies[i].getValue();
                // 存在，获得复选框的值
                checkedAuto = login_info_str.split("&")[2];
            }
        }
        request.setAttribute("checked_remember", checkedRemember);
        request.setAttribute("checked_auto", checkedAuto);
    %>
    <%
        String contextPath = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + contextPath + "/";
    %>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <title>景点详情</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/route-detail.css">
    <link rel="stylesheet" type="text/css" href="css/total.css">

    <link rel="stylesheet" href="css/layui/layui.css" media="all">

    <style>
        .title {
            font-size: 20px;
            font-weight: bolder;
            color: black;
        }

        .ticket_ul {
            clear: both;
            background: #e5fafd;
        }

        .ticket_ul li {
            color: #000;
            font-size: 18px;
            height: 35px;
            padding-left: 15px;
        }

        .hr {
            background-color: #fb8b2f;
            height: 1px;
            border: none;
        }

        .ticket_detail li {
            float: left;
            margin-right: 50px;
        }

        .orderBtn {
            background: #ff934a;
            color: white;
            border-radius: 10px;
            width: 110px;
            height: 40px;
        }

        .orderBtn:hover {
            background: #fb6e3a;
        }

        .grayBtn {
            background: #bcbcbc;
            color: white;
        }

        .grayBtn:hover {
            background: #ababab;
        }

        .img_ul li {
            float: left;
            margin-left: 6px;
        }

        .ul_info li {
            float: left;
        }

    </style>

    <link rel="stylesheet" type="text/css" href="css/comment/main.css"/>
    <link rel="stylesheet" type="text/css" href="css/comment/sinaFaceAndEffec.css"/>
    <link rel="stylesheet" type="text/css" href="css/my_common.css"/>

</head>

<body>

<!--引入头部-->
<jsp:include page="../common/header.jsp"></jsp:include>

<!-- 详情 start -->
<div class="wrap">
    <div class="bread_box">
        <a href="ticket.jsp">门票</a>
        <span> &gt;</span>
        <a href="javascript:;" id="sightNameTitle"></a>
    </div>
    <div class="prosum_box">
        <dl class="prosum_left">
            <dt>
                <img alt="" class="big_img" id="mainPic"
                     src="">
            </dt>
            <dd id="dd">
                <%--<a title="" class="little_img"--%>
                <%--data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4265ec488cd1bc7ce749bc8c9b34b87bc.jpg"--%>
                <%--style="display:none;">--%>
                <%--<img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2265ec488cd1bc7ce749bc8c9b34b87bc.jpg">--%>
                <%--</a>--%>
                <a class="down_img down_img_disable" style="margin-bottom: 0;"></a>
            </dd>
        </dl>
        <div class="prosum_right">
            <p class="pros_title" id="rname"></p>
            <div class="pros_other">
                <p>景点地址 ：<span id="address"></span></p>
                <p>开放时间 : <span id="openTime"></span></p>
            </div>
            <div class="pros_price">
                <p class="collect">
                    <a class="btn" style="background-color: #ff7d8e; width: 110px;height: 40px;" id="favorite" onclick="addFavorite();">
                        <i id="love" class="glyphicon glyphicon-heart-empty"></i>点击收藏</a>
                    <span id="favoriteCount">已收藏0次</span>
                </p>
            </div>
        </div>
    </div>
    <div class="you_need_konw">
        <span class="title" style="font-size: 22px;">门票</span>
        <div class="notice">
            <ul id="ticket_list">

            </ul>

        </div>
    </div>
    <div class="you_need_konw">
        <span class="title" style="font-size: 22px;">景区须知</span>
        <div class="notice" id="notice">
        </div>
    </div>
    <div class="you_need_konw">
        <span class="title" style="font-size: 22px;">景区简介</span>
        <div class="notice" id="introduce">
        </div>
    </div>
    <div class="you_need_konw">
        <span class="title" style="font-size: 22px;">游客点评</span>
        <div class="notice" id="comment" style="display: table;width: 1200px;padding: 15px;">
            <button class="btn2" onclick="findAllCommnets(null);">全部</button>
            <button class="btn2" onclick="findAllCommnets(1);">1星</button>
            <button class="btn2" onclick="findAllCommnets(2);">2星</button>
            <button class="btn2" onclick="findAllCommnets(3);">3星</button>
            <button class="btn2" onclick="findAllCommnets(4);">4星</button>
            <button class="btn2" onclick="findAllCommnets(5);">5星</button>
            <div id="info-show" style="display: table-cell;">
                <ul style="float: left;" class="ul_info"></ul>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-1.11.0.min.js"></script>
<script src="assets/admin/layer/layer.js" type="text/javascript"></script>
<script type="text/javascript" src="js/include.js"></script>
<script src="js/getParameter.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/getDateStr.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/layer/layer.js"></script>

<script>
    $(document).ready(function () {
        //自动播放
        goImg();
        // var timer = setInterval("auto_play()", 5000);
    });

    function goImg() {
        //焦点图效果
        //点击图片切换图片
        $('.little_img').on('mousemove', function () {
            $('.little_img').removeClass('cur_img');
            var big_pic = $(this).data('bigpic');
            $('.big_img').attr('src', big_pic);
            $(this).addClass('cur_img');
        });
        //上下切换
        var picindex = 0;
        var nextindex = 5; // 小图显示5张
        $('.down_img').on('click', function () {
            var num = $('.little_img').length;
            if ((nextindex + 1) <= num) {
                $('.little_img:eq(' + picindex + ')').hide();
                $('.little_img:eq(' + nextindex + ')').show();
                picindex = picindex + 1;
                nextindex = nextindex + 1;
            }
        });
        $('.up_img').on('click', function () {
            var num = $('.little_img').length;
            if (picindex > 0) {
                $('.little_img:eq(' + (nextindex - 1) + ')').hide();
                $('.little_img:eq(' + (picindex - 1) + ')').show();
                picindex = picindex - 1;
                nextindex = nextindex - 1;
            }
        });
    }

    //自动轮播方法
    function auto_play() {
        var cur_index = $('.prosum_left dd').find('a.cur_img').index();
        cur_index = cur_index - 1;
        var num = $('.little_img').length;
        var max_index = 3;
        if ((num - 1) < 3) {
            max_index = num - 1;
        }
        if (cur_index < max_index) {
            var next_index = cur_index + 1;
            var big_pic = $('.little_img:eq(' + next_index + ')').data('bigpic');
            $('.little_img').removeClass('cur_img');
            $('.little_img:eq(' + next_index + ')').addClass('cur_img');
            $('.big_img').attr('src', big_pic);
        } else {
            var big_pic = $('.little_img:eq(0)').data('bigpic');
            $('.little_img').removeClass('cur_img');
            $('.little_img:eq(0)').addClass('cur_img');
            $('.big_img').attr('src', big_pic);
        }
    }


    $(function () {
        sightContent();
        isCollect();
    });

    function sightContent() {
        // 1.获取sightId
        var sightId = getParameter("sightId");

        // 2.发送请求请求 sight/findSightBySightId
        $.get("sight/findSightBySightId", {sightId: sightId}, function (sight) {
            // 显示景点标题导航
            $("#sightNameTitle").html(sight.sightName);

            // 景点标题
            $("#rname").html(sight.sightName);
            // 景点地址
            $("#address").html(sight.province.provinceName + sight.city.cityName + sight.detailAddr);
            // 景点的开放时间
            $("#openTime").html(sight.openTime);
            // 收藏次数
            $("#favoriteCount").html("已收藏" + sight.collectCount + "次");
            // 景区须知的内容
            $("#notice").html(sight.orderNotice);
            // 景区简介的内容
            $("#introduce").html(sight.introduce);

            // 第一张显示的图片
            $("#mainPic").attr("src", sight.sightImgList[0].imgPath);

            /** 图片展示 **/
            var ddstr = '<a class="up_img up_img_disable"></a>';

            //遍历sightImgList
            for (var i = 0; i < sight.sightImgList.length; i++) {
                var astr;
                if (i >= 5) {
                    astr = '<a title="" class="little_img" data-bigpic="' + sight.sightImgList[i].imgPath + '" style="display:none;">\n' +
                        '                        <img src="' + sight.sightImgList[i].imgPath + '">\n' +
                        '                    </a>';
                } else {
                    astr = '<a title="" class="little_img" data-bigpic="' + sight.sightImgList[i].imgPath + '">\n' +
                        '                        <img src="' + sight.sightImgList[i].imgPath + '">\n' +
                        '                    </a>';
                }


                ddstr += astr;
            }
            ddstr += '<a class="down_img down_img_disable" style="margin-bottom: 0;"></a>';

            $("#dd").html(ddstr);

            // 图片展示和切换代码调用
            goImg();

            /** 显示门票信息 **/
            var ticketList = ""; // 门票列表数据

            // 遍历所有门票信息
            for (var i = 0; typeof (sight.ticketTypeList) != "undefined" && i < sight.ticketTypeList.length; i++) {

                var ticketType = sight.ticketTypeList[i];

                var ul = ""

                var li = '<hr style="clear: both;"/>\n' +
                    '                <li>\n' +
                    '                    <div style="clear: both;">\n' +
                    '                        <p style="font-size: 20px;padding-left: 20px;float: left;">' + ticketType.ticketTypeName + '</p>\n' +
                    '                        <button style="background: white;font-size: 16px;margin-right: 50px;float: right;">收起<span class="to_bottom"></span></button>\n' +
                    '                    </div>\n';

                /* 获得景点门票具体类型集合 */
                var ticketTyepDetails = ticketType.ticketTypeDetails;

                for (var j = 0; typeof (ticketTyepDetails) != "undefined" && j < ticketTyepDetails.length; j++) {

                    var ticketTyepDetail = ticketTyepDetails[j];
                    var order_btn_text = ""; // 预定按钮的文本
                    var is_disabled = ""; // 是否将预定按钮设为不可用
                    var now_stock_num = -1; // 门票当前库存数量

                    /* 获得该景点门票具体类型门票库存集合 */
                    var sightTicketStocks = ticketTyepDetail.sightTicketStocks;
                    /* 获得当前日期 */
                    var nowDate = getDateStr(new Date());
                    for (var k = 0; typeof (sightTicketStocks) != "undefined" && k < sightTicketStocks.length; k++) {
                        var sightTicketStock = sightTicketStocks[k];
                        /* 获得今日剩余票数 */
                        if (nowDate == getDateStr(sightTicketStock.date)) {
                            now_stock_num = sightTicketStock.nowStockNum;
                        }
                    }
                    if (now_stock_num == -1) {
                        order_btn_text = "今日停售";
                        is_disabled = "style='background: gray'";
                    } else if (now_stock_num == 0) {
                        order_btn_text = "今日已售完";
                    } else if (now_stock_num < 20) {
                        order_btn_text = "今日仅剩" + now_stock_num + "份";
                    } else {
                        order_btn_text = "立即预定";
                    }

                    ul = '          <ul class="ticket_ul">\n' +
                        '                    <hr class="hr"/>\n' +
                        '                        <li>\n' +
                        '                            <ul class="ticket_detail">\n' +
                        '                                <li><div style="width: 440px;">\n' +
                        '                                    <span>&lt;' + ticketTyepDetail.detailTypeName + '&gt;</span>\n' +
                        '                                </div></li>\n' +
                        '                                <li><div style="width: 80px;text-align: center;">\n';

                    if (ticketTyepDetail.isCancel == 0) {
                        ul += '<span style="color: dodgerblue;">不可退</span>\n';
                    } else if (ticketTyepDetail.cancelRule == "" || typeof (ticketTyepDetail) == "undefined") {
                        ul += '<span style="color: dodgerblue;">随时可退</span>\n';
                    } else {
                        ul += '<span style="color: dodgerblue;">条件退</span>\n';
                    }

                    ul += '                              </div></li>\n' +
                        '                                <li><div style="width: 260px;text-align: center;">\n' +
                        '                                    <span style="color: #ff7c40;font-size: 30px;">￥' + ticketTyepDetail.orderPrice + '</span>\n' +
                        '                                    <span style="color: rgba(170,172,166,0.59);">起&nbsp;景区挂牌价</span>' + '<span style="text-decoration: line-through;color: rgba(170,172,166,0.59);">￥' + ticketTyepDetail.initPrice + '</span>\n' +
                        '                                </div></li>\n' +
                        '                                <li><a href="pages/sight/sight_order.jsp?detailTypeId=' + ticketTyepDetail.detailTypeId + '"><button class="orderBtn" ' + is_disabled + '>' + order_btn_text + '</button></a></li>\n' +
                        '                            </ul>\n' +
                        '                      </li>\n' +
                        '                  <hr class="hr"/>\n' +
                        '              </ul>\n';
                }

                li += ul + '</li>';

                ticketList += li;
            }

            if (sight.isOnSell == 1) {
                $("#ticket_list").html(ticketList);
            }

            $("#ticket_list > li > div > button").click(function () {

                if ($(this).html().indexOf("收起") != -1) {
                    $(this).html("展开<span class=\"to_left\"></span>");
                } else {
                    $(this).html("收起<span class=\"to_bottom\"></span>");
                }

                $(this).parent().siblings().slideToggle(500);
            });

        });
    }

    /* 判断用户是否收藏该景点 */
    function isCollect() {
        // 发送请求，判断用户是否收藏过该线路
        var sightId = getParameter("sightId");
        $.post("sight_collect/isCollect", {sightId: sightId}, function (data) {
            if (data.flag) {
                // 用户已经收藏过
                $("#favorite").text("取消收藏");
                //设置收藏按钮的样式
                $("#favorite").addClass("already");
                $("#favorite").css("background-color", "#d2d2d2");
                $("#love").removeClass();
            } else {
                // 用户没有收藏
                $("#favorite").text("点击收藏");
                //设置收藏按钮的样式
                $("#favorite").addClass("btn");
                $("#favorite").css("background-color", "#ff7d8e");
                $("#love").addClass("glyphicon glyphicon-heart-empty");
            }
        });
    }

    // 点击收藏按钮触发的方法
    function addFavorite() {
        var collect_btn_text = $("#favorite").text();
        var sightId = getParameter("sightId");

        //1. 判断用户是否登录
        if (${empty user}) {
            location.href = "pages/common/login.jsp";
        } else {
            // 用户登录了
            // 判断是添加收藏还是取消收藏
            if (collect_btn_text == "点击收藏") {
                // 添加功能
                $.post("sight_collect/collectSight", {sightId: sightId}, function (data) {
                    if (data.flag) {
                        layer.msg("收藏成功！", {icon: 1, time: 1500});
                        // 重新刷新内容
                        sightContent();
                        isCollect();
                    } else {
                        layer.msg(data.errorMsg, {icon: 6}, 1500);
                    }
                });
            } else { // 取消收藏
                // 添加功能
                $.post("sight_collect/cancelCollectSight", {sightId: sightId}, function (data) {
                    if (data.flag) {// 代码刷新页面
                        layer.msg("取消收藏成功！", {icon: 1, time: 1500});
                        // 重新刷新内容
                        sightContent();
                        isCollect();
                    } else {
                        layer.msg(data.errorMsg, {icon: 6}, 1500);
                    }
                });
            }

        }
    }


</script>

<!-- 景点评论 -->
<script type="text/javascript" src="js/comment/main.js"></script>
<script type="text/javascript" src="js/comment/sinaFaceAndEffec.js"></script>
<script type="text/javascript">
    setTimeout(out, 100);

    // 测试本地解析
    function out(ele) {
        var inputText = "[哈哈][哆啦A梦吃惊]";
        // var inputText = $('.text').val();
        $('#info-show ul').append(reply(AnalyticEmotion(inputText)));
        $(ele).parent().parent().parent().slideUp();
    }


    $(function () {
        setTimeout(findAllCommnets(null), 300);
    });

    function findAllCommnets(starNum) {
        // 1.获取sightId
        var sightId = getParameter("sightId");
        $('#info-show ul').html("");

        // 查找该景点所有的评论
        $.post("comment/findAllBySightIdAndStar", {sightId: sightId, starNum: starNum}, function (comments) {
            var commentStr = "";

            for (var i = 0; typeof (comments) != "undefined" && i < comments.length; i++) {
                var comment = comments[i];
                var user = comment.user;
                var dateTime = getDateStr(comment.createTime);
                var inputText = comment.content;

                var imgs = "";

                commentStr += '<li>\n' +
                    '                <div class="head-face">\n' +
                    '                <img src="${user.headImg}" />\n' +
                    '                </div>\n' +
                    '                <div class="reply-cont">\n' +
                    '                <p class="username">' + user.nickName + '<span style="padding-left:80px;">评分：' + comment.starNum + '星</span></p>\n' +
                    '                <p class="comment-body">' + AnalyticEmotion(inputText) + '</p>\n';

                for (var j = 0; typeof (comment) != "undefined" && j < comment.commentImgs.length; j++) {
                    var commentImg = comment.commentImgs[j];

                    imgs += '<ul class="img_ul" style="float:left;">\n' +
                        '    <li>\n' +
                        '        <a href="/travel/' + commentImg.imgPath + '"><img height="120" width="140" src="' + commentImg.imgPath + '" style="border-radius: 5px;"></a>\n' +
                        '    </li>\n' +
                        '</ul>';
                }

                commentStr += imgs;

                commentStr += '                <p class="comment-footer" style="clear: both;"><span>' + dateTime + '</span>　<span tabindex="0" hidefocus="true" style="cursor: pointer;" onfocus="replyFocus(this);">回复</span>　<span style="cursor: pointer;" onclick="like(\'' + comment.sightCommentId + '\');">点赞' + comment.likeNum + '</span></p>\n' +
                    '                <div class="content" style="display: none;">\n' +
                    '                        <div class="cont-box">\n' +
                    '                            <textarea class="text" placeholder="请输入..."></textarea>\n' +
                    '                        </div>\n' +
                    '                        <div class="tools-box" style="height: 31px">\n' +
                    '                            <div class="operator-box-btn"><span class="face-icon" style="margin-top: -6px;">☺</span></div>\n' +
                    '                            <div class="submit-btn"><input type="button" onClick="out(this);" value="回复"/></div>\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '                </li>';

            }

            $('#info-show ul').append(commentStr);
        });
    }

    function replyFocus(ele) {
        $(ele).parent().next().slideToggle();
    }
    var count = 0;
    // 点赞
    function like(commentId) {

        if (count % 2 == 0) {
            // 点赞
            $.post("comment/updateLikeNum", {commentId: commentId, isAdd: "true"}, function (data) {
                if (data.flag) {
                    findAllCommnets();
                    layer.msg("点赞成功！", {icon: 6, time: 1500});
                }
            });
        } else { // 取消点赞
            // 点赞
            $.post("comment/updateLikeNum", {commentId: commentId, isAdd: "false"}, function (data) {
                if (data.flag) {
                    findAllCommnets();
                    layer.msg("取消点赞！", {icon: 5, time: 1500});
                }
            });
        }

        count++;
    }


</script>
</body>

</html>